<template>
  <div class="login">
    <video
      class="video"
      src="../../assets/142c9d1dc88f40db8c6a14b8897fef7f.mp4"
      autoplay
      loop
      muted
    ></video>
    <div class="box">
      <div class="iconBox">
        <i
          @click="iconFontFn"
          :class="{
            'iconfont icon-erweimajiaobiao': !iconFont,
            'iconfont icon-diannaojiaobiao': iconFont,
          }"
        ></i>
      </div>

      <div>
        <UserLogin v-show="userstate" />
        <MobileLogin v-show="mobilestate" />
        <h5 @click="changeFn()" v-show="!qrcodestate">
          <i
            :class="{
              ' el-icon-mobile': changeIcon,
              ' el-icon-user': !changeIcon,
            }"
          ></i>
          {{ content ? "用户名登录" : "手机号登录" }}
        </h5>
      </div>
      <div>
        <QrcodeLogin v-show="qrcodestate" />
      </div>
    </div>
  </div>
</template>

<script>
import UserLogin from "./components/UserLogin.vue";
import MobileLogin from "./components/MobileLogin.vue";
import QrcodeLogin from "./components/QrcodeLogin.vue";
export default {
  components: {
    UserLogin,
    MobileLogin,
    QrcodeLogin,
  },
  data() {
    return {
      userstate: true,
      mobilestate: false,
      qrcodestate: false,

      content: false,
      changeIcon: true,

      iconFont: false,
    };
  },
  methods: {
    changeFn() {
      if (this.content) {
        this.userstate = true;
        this.mobilestate = false;
        this.qrcodestate = false;
        this.content = !this.content;
        this.changeIcon = !this.changeIcon;
      } else {
        this.userstate = false;
        this.mobilestate = true;
        this.qrcodestate = false;
        this.content = !this.content;
        this.changeIcon = !this.changeIcon;
      }
    },
    iconFontFn() {
      this.iconFont = !this.iconFont;
      if (!this.iconFont) {
        this.userstate = true;
        this.mobilestate = false;
        this.qrcodestate = false;
      } else {
        this.userstate = false;
        this.mobilestate = false;
        this.qrcodestate = true;
      }
    },
  },
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .video {
    // width: 100%;
    height: 120%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .box {
    width: 360px;
    height: 500px;
    background-color: rgba($color: #2d476e, $alpha: 0.6);
    position: absolute;
    z-index: 99;
    top: 150px;
    right: 120px;
    //padding-right: 50px;

    .iconBox {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 100;
      i {
        font-size: 55px;
        color: wheat;
      }
    }

    h5 {
      color: wheat;
      position: absolute;
      left: 140px;
      right: 0;
      bottom: 40px;
    }

    h1 {
      margin: 60px 0 50px;
      text-align: center;
      color: wheat;
    }
    .el-form {
      padding-right: 60px;

      label {
        color: wheat;
      }
      .el-button {
        width: 200px;
      }
    }
  }
}
</style>
